<template>
  <sc-flex>
    <view class="glo-statistics" @tap.stop>
      <template v-for="item in statistics" :key="item.name">
        <text class="item-statistics-name">{{ item.name }}：</text>
        <text class="item-statistics-value">{{ item.value }}</text>
        <view v-for="(icon, index) in item.icon" :key="index" class="item-statistics-icon" @click="selectDing(icon)">
          <image src="/static/imgs/ic_ding.png" mode="aspectFit"></image>
        </view>
        <view class="item-statistics-separator">/</view>
      </template>
    </view>
  </sc-flex>
</template>

<script setup>
const props = defineProps({
  statistics: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(['select'])
const selectDing = (icon) => {
  emit('select', icon)
}
</script>

<style lang="scss" scoped>
.glo-statistics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 28rpx;
  background: rgba(15, 103, 254, 0.102);
  border-left: 2rpx solid #0f67fe;
  padding: 0 25rpx;
  font-weight: 400;
  font-size: 19rpx;
  line-height: 28rpx;

  .item-statistics-name {
    color: #767676;
  }

  .item-statistics-value {
    color: #0f67fe;
  }

  .item-statistics-icon {
    padding-left: 10rpx;

    >image {
      width: 19rpx;
      height: 19rpx;
    }
  }

  .item-statistics-separator {
    color: #767676;
    padding: 0 5rpx;

    &:last-child {
      display: none;
    }
  }
}
</style>
